<#assign shiro=JspTaglibs["http://shiro.apache.org/tags"]>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>资源管理</title>

<link rel="stylesheet" href="/common/js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="/common/js/bootstrap-3.0.0/css/bootstrap-united.min.css" type="text/css">
<link rel="stylesheet" href="/common/js/artDialog/skins/default.css" type="text/css">
<style type="text/css">
    body {
        padding: 10px 0;
    }

    div.ztree {
        margin-top: 10px;
        margin-left: 20px;
        /*border: 1px solid #617775;*/
        background: #f0f6e4;
        width: 300px;
        height: 600px;
        overflow-y: auto;
        overflow-x: auto;
    }

    #rMenu {
        border: 1px solid #999999;
        background: #FFFFFF;
        padding-top: 0px;
        margin-left: -1px;
        width: 170px;
        display: none;
        max-height: 180px;
        overflow: auto;
        position: absolute;
    }

    #rMenu table {
        width: 100%;
    }

    #rMenu table tr td:hover {
        background-color: #FF9999;
        cursor: pointer
    }
</style>

<script type="text/javascript" src="/common/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/common/js/zTree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="/common/js/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>
<script type="text/javascript" src="/common/js/artDialog/jquery.artDialog.min.js"></script>
<script type="text/javascript" src="/common/js/artDialog/artDialog.plugins.min.js"></script>
<#--<script type="text/javascript" src="/js/jquery-plugin/validate/jquery.validate.min.js"></script>-->
<script type="text/javascript">
(function (d) {
    d['okValue'] = '确定';
    d['cancelValue'] = '取消';
    d['title'] = '提示';
})($.dialog.defaults);

var rMenu;
//init resources tree
$(document).ready(function () {
    rMenu = $("#rMenu");

    $.ajax({
        type: "get",
        url: "/resc/getResourceListByRole.json",
        success: function (data) {
            var setting = {
//                        check:{
//                            enable:true,
//                            chkboxType:{ "Y":"", "N":"" }
//                        },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "fatherId"
                    },
                    key: {
                        name: "name"
                    }
                },
                callback: {
                    onClick: function (event, treeId, treeNode) {
                        viewResc(treeNode);
                    },
                    onRightClick: OnRightClick
                }
            };

            $.fn.zTree.init($("#rescTree"), setting, data.list);
        }
    });
});

function OnRightClick(event, treeId, treeNode) {
    var treeObj = $.fn.zTree.getZTreeObj("rescTree");
    if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
        treeObj.cancelSelectedNode();
        showRMenu("root", event.clientX, event.clientY);
    } else if (treeNode && !treeNode.noR) {
        treeObj.selectNode(treeNode);
        showRMenu("node", event.clientX, event.clientY);
    }
}

function showRMenu(type, x, y) {

    if (type == "root") {
        $("#m_del").hide();
    } else {
        $("#m_del").show();
    }
    if ($("#rMenu").height() > 0) {
        $("#rMenu table").show();
        rMenu.css({"top": y + "px", "left": x + "px", "display": "block"});
        $("body").bind("mousedown", onBodyMouseDown);
    }

}

/**
 * 资源信息
 * @param node
 */
function viewResc(node) {
    $("#rescId").html(node.id);
    $("#rescName").html(node.name);
    $("#rescUrl").html(node.showUrl);
    $("#rescResString").html(node.resString);
    $("#rescPriority").html(node.priority);
    $("#rescDescn").html(node.descn);
}

/**
 * 新增当前节点
 * @param currentNode
 */
function addNewNode(currentNode) {
    var treeObj = $.fn.zTree.getZTreeObj("rescTree");
    treeObj.addNodes(treeObj.getSelectedNodes()[0], currentNode);
}
/**
 * 更新当前节点
 *
 */
function updateCurrentNode(currentNode) {
    var treeObj = $.fn.zTree.getZTreeObj("rescTree");
    treeObj.getSelectedNodes()[0].name = currentNode.name;
    treeObj.getSelectedNodes()[0].showUrl = currentNode.showUrl;
    treeObj.getSelectedNodes()[0].resString = currentNode.resString;
    treeObj.getSelectedNodes()[0].priority = currentNode.priority;
    treeObj.getSelectedNodes()[0].showMenu = currentNode.showMenu;
    treeObj.getSelectedNodes()[0].descn = currentNode.descn;
    treeObj.updateNode(treeObj.getSelectedNodes()[0]);
    viewResc(currentNode);
}

/**
 * 增加资源
 */
function addTreeNode() {
    var treeObj = $.fn.zTree.getZTreeObj("rescTree");
    var fatherId;
    hideRMenu();
    if (treeObj.getSelectedNodes()[0]) {
        fatherId = treeObj.getSelectedNodes()[0].id;
    } else {
        fatherId = 0;
    }
    showEditWin(null, fatherId);
}


/**
 * 更新节点
 */
function editTreeNode() {
    var treeObj = $.fn.zTree.getZTreeObj("rescTree");
    var fatherId;
    hideRMenu();
    if (treeObj.getSelectedNodes()[0]) {
        fatherId = treeObj.getSelectedNodes()[0].fatherId;
        if (null == fatherId) {
            fatherId = 0;
        }
        showEditWin(treeObj.getSelectedNodes()[0], fatherId);
    } else {
        alert("请选择父节点");
    }
}

/**
 * 删除 资源
 */
function removeTreeNode() {
    var treeObj = $.fn.zTree.getZTreeObj("rescTree");
    hideRMenu();
    var nodes = treeObj.getSelectedNodes();
    var flag = false;
    var msg = "";
    if (nodes && nodes.length > 0) {
        if (nodes[0].children && nodes[0].children.length > 0) {
            msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
            if (confirm(msg) == true) {
                flag = true;
            }
        } else {
            msg = "要删除资源:" + nodes[0].name + "。\n\n请确认！";
            if (confirm(msg) == true) {
                flag = true;
            }
        }
        if (flag) {
            treeObj.removeNode(nodes[0]);
            $.ajax({
                type: "get",
                url: "/resc/deleteResc.json",
                data: {
                    rescId: nodes[0].id,
                    rescName: nodes[0].name
                }
            });
        }
    }
}

var editWin;
function showEditWin(node, pid) {
    var title = "增加数据权限";
    if (node) {
        title = "编辑数据权限";
        $("#id").val(node.id);
        $("#pid").val(node.fatherId);
        $("#name").val(node.name);
        $("#showUrl").val(node.showUrl);
        $("#resString").val(node.resString);
        $("#priority").val(node.priority);
        if (node.showMenu == 1) {
            $("#showMenu").attr("checked", true);
        } else {
            $("#showMenu").attr("checked", false);
        }

        $("#descn").val(node.descn);
        $("#form").attr("action", "/resc/updateResc.json");
    } else {
        $("#id").val("");
        $("#pid").val(pid);
        $("#name").val("");
        $("#showUrl").val("");
        $("#resString").val("");
        $("#priority").val("");
        $("#showMenu").attr("checked", false);
        $("#descn").val("");
        $("#form").attr("action", "/resc/addResc.json");
    }

    $("#showMenu").change(function () {
        if ($(this).attr("checked")) {
            $("#showMenuVal").val(1);
        } else {
            $("#showMenuVal").val(0);
        }
    });

    $("#showMenu").change();

    editWin = $.dialog({
        title: title,
        width: 600,
        lock: true,
        content: document.getElementById('editWin')
    });
}

function hideRMenu() {
    if (rMenu) rMenu.css({"display": "none"});
    $("body").unbind("mousedown", onBodyMouseDown);
}

function onBodyMouseDown(event) {
    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
        rMenu.css({"display": "none"});
    }
}

function modifyResc() {
    $.ajax({
        type: "post",
        url: $("#form").attr("action"),
        data: $("#form").serialize(),
        success: function (data) {
            if (data.success) {
                if ($("#form").attr("action").indexOf("update") > 0) {
                    updateCurrentNode(data.currentResc);
                } else {
                    addNewNode(data.currentResc);
                }
                editWin.close();
            } else {
                $.alert("提交失败");
            }
        }, error: function () {
            $.alert("提交失败");
        }
    });
}
</script>
</head>
<body>
<div class="container">
    <div class="row">
        <div id="rescTree" style="float: left;" class="ztree col-lg-4">
        </div>

        <div style="float: left;" class="col-lg-7">
            <table class="table table-bordered">
                <caption><h3>资源详情</h3></caption>
                <tbody>
                <tr>
                    <td>资源ID:</td>
                    <td id="rescId"></td>
                </tr>
                <tr>
                    <td>资源名称:</td>
                    <td id="rescName"></td>
                </tr>
                <tr>
                    <td>地址:</td>
                    <td id="rescUrl"></td>
                </tr>
                <tr>
                    <td style="100px">权限控制:</td>
                    <td id="rescResString" style="word-break: break-all; width: 500px;"></td>
                </tr>
                <tr>
                    <td>优先级:</td>
                    <td id="rescPriority"></td>
                </tr>
                <tr>
                    <td>资源描述:</td>
                    <td id="rescDescn"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!--鼠标右键功能菜单 -->
<#--<#if (flag??&& flag == true)>-->
<div id="rMenu">
    <table style="border: 0">
    <@shiro.hasPermission name="/resc:addResc">
        <tr>
            <td id="m_add" onclick="addTreeNode();">增加资源</td>
        </tr>
    </@shiro.hasPermission>

    <@shiro.hasPermission name="/resc:updateResc">
        <tr>
            <td id="m_edit" onclick="editTreeNode();">编辑资源</td>
        </tr>
    </@shiro.hasPermission>

    <@shiro.hasPermission name="/resc:deleteResc">
        <tr>
            <td id="m_del" onclick="removeTreeNode();">删除资源</td>
        </tr>
    </@shiro.hasPermission>
    </table>
</div>

<div id="editWin" style="display: none">
    <form id="form" method="post" class="form-horizontal">
        <input type="hidden" name="rescId" id="id"/>
        <input type="hidden" name="fatherId" id="pid"/>

        <div class="form-group">
            <label class="col-sm-4 control-label"
                   for="name">资源名称</label>

            <div class="col-sm-8">
                <input type="text" class="form-control" id="name" name="name">

                <p class="help-block" style="color: red">必填</p>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-4 control-label"
                   for="key">资源地址</label>

            <div class="col-sm-8">
                <input type="text" class="form-control" id="showUrl" name="showUrl">

                <p class="help-block" style="color: red">必填</p>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-4 control-label"
                   for="value">权限控制</label>

            <div class="col-sm-8">
                <input type="text" class="form-control" id="resString" name="resString">

                <p class="help-block" style="color: red">必填</p>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-4 control-label"
                   for="value">优先级</label>

            <div class="col-sm-8">
                <input type="number" class="form-control" id="priority" name="priority">

                <p class="help-block" style="color: red">必填,数字</p>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-4 control-label"
                   for="value">是否显示</label>

            <div class="col-sm-8">
                <label class="checkbox">
                    <input type="checkbox" id="showMenu"/>
                    <input type="hidden" id="showMenuVal" name="showMenu"/>
                </label>

                <p class="help-block"></p>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-4 control-label"
                   for="value">备注</label>

            <div class="col-sm-8">
                <textarea type="text" class="form-control" id="descn" name="descn"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-4">
                <button style="width: 80px;" type="button" onclick="modifyResc();" class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>
</div>

</body>
</html>